<template>
  <view class="container">
    <!-- 搜索与排序操作区 -->
    <view class="operate-area">
      <view class="search-box">
        <image class="search-icon" src="/static/category/search.png" mode="widthFix"></image>
        <input
          type="text"
          v-model="searchKey"
          placeholder="搜索分类名称..."
          @input="handleSearch"
        />
      </view>
      <picker
        class="sort-select"
        :range="sortOptions"
        :value="currentSort"
        @change="handleSortChange"
      >
        <view class="sort-text">排序方式：{{ sortOptions[currentSort] }}</view>
      </picker>
    </view>

    <!-- 分类列表 -->
    <view class="category-list">
      <view
        v-for="(category, index) in filteredCategories"
        :key="index"
        class="category-item"
        @click="goToArticleList(category.name)"
      >
        <image class="category-icon" src="/static/category/category.png" mode="widthFix"></image>
        <view class="category-info">
          <text class="name">{{ category.name }}</text>
          <text class="count">共{{ category.articleCount }}篇文章</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKey: '',
      currentSort: 0,
      sortOptions: ['按热门程度', '按字母顺序'],
      categories: [
        { name: '技术', articleCount: 56 },
        { name: '生活', articleCount: 32 },
        { name: '旅行', articleCount: 45 },
        { name: '美食', articleCount: 28 },
        { name: '读书', articleCount: 19 },
        { name: '摄影', articleCount: 37 }
      ]
    }
  },
  computed: {
    filteredCategories() {
      // 搜索过滤
      let filtered = this.categories.filter(category => 
        category.name.includes(this.searchKey)
      );

      // 排序处理
      if (this.currentSort === 0) {
        // 按热门程度（文章数降序）
        return filtered.sort((a, b) => b.articleCount - a.articleCount);
      } else {
        // 按字母顺序
        return filtered.sort((a, b) => a.name.localeCompare(b.name));
      }
    }
  },
  methods: {
    handleSearch() {
      // 可添加防抖优化
    },
    handleSortChange(e) {
      this.currentSort = e.detail.value;
    },
    goToArticleList(categoryName) {
      uni.navigateTo({
        url: `/pages/article/list?category=${encodeURIComponent(categoryName)}`
      });
    }
  }
}
</script>

<style scoped>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 40rpx 30rpx;
}

.operate-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40rpx;
}

.search-box {
  width: 70%;
  background-color: #fff;
  border-radius: 40rpx;
  padding: 15rpx 30rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
}

.search-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 20rpx;
}

.sort-select {
  width: 28%;
  background-color: #e6f7ff;
  border-radius: 16rpx;
  padding: 15rpx 20rpx;
  font-size: 28rpx;
  color: #2f54eb;
}

.category-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30rpx;
}

.category-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.06);
  transition: transform 0.2s;
}

.category-item:hover {
  transform: translateY(-4rpx);
}

.category-icon {
  width: 60rpx;
  height: 60rpx;
  margin-right: 30rpx;
}

.category-info .name {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 8rpx;
}

.category-info .count {
  font-size: 24rpx;
  color: #666;
}

@media (min-width: 768px) {
  .container {
    padding: 60rpx 80rpx;
  }
  .category-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 40rpx;
  }
}
</style>